<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-select v-model="searchForm.app_id" placeholder="请选择应用名称">
					<el-option v-for="item in appList" :key="item.label" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-input v-model="searchForm.user_id" placeholder="请输入用户id" clearable> </el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getTUserList">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="reloadList">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="tableData" tooltip-effect="dark" style="width: 100%" border stripe>
			<el-table-column prop="app_id" align="center" label="应用id"> </el-table-column>
			<el-table-column prop="create_by_name" align="center" label="操作人名称"> </el-table-column>
			<el-table-column prop="gmt_create" align="center" label="创建时间">
				<template slot-scope="scope">
					{{ formatTime(scope.row.gmt_create) }}
				</template>
			</el-table-column>
			<el-table-column prop="product_name" align="center" label="产品名称"> </el-table-column>
			<el-table-column prop="client_type" align="center" label="客户端类型"> </el-table-column>
			<el-table-column prop="recipient" align="center" label="所赠用户uid"> </el-table-column>
			<el-table-column prop="recipient_email" align="center" label="所赠用户email"> </el-table-column>
			<el-table-column prop="remark" align="center" label="备注"> </el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			:current-page="current"
			:page-size="size"
			:total="total"
		>
		</el-pagination>
	</div>
</template>

<script>
import dayjs from 'dayjs';
import { appList } from '../../components/data.ts';
export default {
	name: 'ProductList',
	data() {
		return {
			searchForm: {},
			delBtlStatu: true,
			total: 0,
			size: 10,
			current: 1,
			multipleSelection: [],
			vegetablesType: [],
			imageListVisible: false,
			feedbackProcessVisible: false,
			tableData: [],
			farmList: [],
			loading: false,
			appList,
		};
	},
	created() {
		this.getTUserList();
	},
	methods: {
		reloadList() {
			this.searchForm = {};
			this.getTUserList();
		},
		formatTime(time) {
			const localTime = dayjs(time).format('YYYY-MM-DD HH:mm:ss');
			// 使用Day.js将时间转换成当前时区的时间
			return localTime;
		},

		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getTUserList();
		},
		handleCurrentChange(val) {
			console.log(`当前页 ${val}`);
			this.current = val;
			this.getTUserList();
		},
		getTUserList() {
			this.$axios
				.get('/expense/product/gift/list', {
					params: {
						app_id: this.searchForm.app_id,
						current: this.current,
						size: this.size,
						product_id: this.searchForm.product_id,
						user_id: this.searchForm.user_id ? this.searchForm.user_id.toString().trim() : undefined,
					},
				})
				.then((res) => {
					console.log('userList', res);
					// 其余的代码
					this.tableData = res.data.records;
					this.size = res.data.size;
					this.current = res.data.current;
					this.total = res.data.total;
				})
				.catch((error) => {
					console.error('发生请求错误：', error);
				});
		},
	},
};
</script>

<style scoped>
.el-button {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	margin-right: 10px;
}
</style>
